<template>
  <!-- 组织结构 -->
  <div class="dashboard-container" v-loading="loading">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- el-row是行  el-col是列 -->
        <tree-tolls
          :tree-node="company"
          :isRoot="true"
          @addDept="addDept"
        ></tree-tolls>
        <!-- 放置一个树形控件 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 作用域插槽 slot-scope='obj' 接收传递给插槽的数据 data 每个节点的数据 -->
          <!-- @delDepts="getDepartments" 接收子组件传过的数据，重新渲染视图 -->
          <tree-tolls
            slot-scope="{ data }"
            :tree-node="data"
            @delDepts="getDepartments"
            @addDept="addDept"
            @getDept="getDept"
          ></tree-tolls>
        </el-tree>
      </el-card>
    </div>
    <!-- 新增部门组件 -->
    <add-dept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :tree-node="node"
      @depts="getDepartments"
    />
  </div>
</template>

<script>
// 引入树形组件
import TreeTolls from "./components/tree-tolls.vue";
// 导入获取组织架构API
import { getDepartments } from "@/api/departments";
// 导入树形结构数据方法
import { transListDateTree } from "@/utils/index";
// 导入新增部门组件
import AddDept from "./components/add-dept.vue";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    TreeTolls,
    AddDept
  },
  // 组件状态值
  data() {
    return {
      company: {}, // 头部列表
      departs: [], // 转换过后的数据
      defaultProps: {
        label: "name" // 寻找下一级节点
      },
      showDialog: false, // 新增部门弹出层
      node: null, // 记录当前点击的部门
      loading: false // 控制进度条的显示与隐藏
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 获取部门数据列表
    async getDepartments() {
      this.loading = true;
      const result = await getDepartments();
      this.company = { name: "湖人篮球俱乐部", manager: "阿亮", id: "" };
      this.departs = transListDateTree(result.depts, "");
      this.loading = false;
    },
    // node 记录当前点击的部门
    // 添加部门
    addDept(node) {
      this.showDialog = true;
      this.node = node;
    },
    // 获取部门详情
    getDept(node) {
      this.showDialog = true;
      this.node = node;
      // this.$refs 获取表单中的实例,node.id 传入当前点击部门的id
      this.$refs.addDept.getDepartDetail(node.id);
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    // 调用自身方法
    this.getDepartments();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {}
};
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
